<!-- @Author: Yu_Bo -->
<template>
	<view class="records">
		<view class="details_list">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="img">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="title line_one">
						{{item.goods_name}}
					</view>
					<view class="txt line_one">
						{{item.author}}/{{item.press}}
					</view>
					<view class="txt">
						入库人员：{{item.username}}
						<text style="padding: 10rpx;"></text>
						ID：{{item.operator_id}}
					</view>
					<view class="txt">
						货架号：{{item.shelf_number}}
					</view>
					<view class="bot">
						<text class="time">{{item.createtime}}</text>
						<text class="num">当前库存：{{item.stock}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="mall_loading" v-if="list.length">
			<u-loadmore :status="status" color='#999' font-size='26' />
		</view>
		<!-- 无数据 -->
		<c-emptydata :type="3" v-if="list.length == 0"></c-emptydata>
		<!-- 底部按钮 -->
		<c-footer>
			<view class="footer_btn">
				<view class="btn_txt color_right page_button" @click="scancodeBtn">
					扫码入库
				</view>
			</view>
		</c-footer>
		<!-- 扫码入库 -->
		<c-scancode ref="scancode" @confirm="confirmBtn"></c-scancode>
		<!-- 确认入库 -->
		<c-prompttwo ref="prompttwo" text="确定将此本书入库吗？" @confirm="submitBtn"></c-prompttwo>
		<!-- 扫码入库成功 -->
		<c-entryexit ref="entryexit" :type="1"></c-entryexit>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return{
				list: [],
				page: 1,
				status: 'loadmore',//加载前值为loadmore，加载中为loading，没有数据为nomore
				// 
				formInfo: null,
				formData: null
			}
		},
		computed: {},
		onLoad() {
			this.getList()
		},
		onShow() {},
		methods: {
			// 获取列表
			getList() {
				var that = this
				if(that.pages != 1) {
					that.status = 'loading'
				}
				var params = {
					page: that.page,
				}
				that.$httpApi.enterLog(params).then((res) => {
					if (res.code == 1) {
						if(that.page == 1) {
							that.list = []
						}
						if(res.data && res.data.length == 10) {
							that.list=that.list.concat(res.data)
							that.status = "loadmore"
						} else if(res.data && res.data.length < 10) {
							that.list=that.list.concat(res.data)
							that.status = "nomore"
						} else {
							that.status = "nomore"
						}
					}
				})
			},
			// 扫码入库
			scancodeBtn() {
				this.$refs.scancode.openBtn()
			},
			// 扫码入库回调
			confirmBtn(item, info) {
				this.formInfo = info
				this.formData = item
				this.$refs.prompttwo.openBtn()
			},
			// 确认回调
			submitBtn() {
				var that = this
				var params = {
					...that.formData
				}
				that.$httpApi.transferIn(params).then((res) => {
					if (res.code == 1) {
						that.$refs.entryexit.openBtn(that.formInfo)
						that.getList()
					}
				})
			},
		},
		onReachBottom(){
			 if(this.status == 'nomore' || this.status == 'loading'){
			 	return
			 }
			 this.page++
			 this.search()
		}
	}
</script>

<style lang='scss' scoped>
	.records {
		width: 100%;
		min-height: 100vh;
		padding: 30rpx 30rpx;
		background: #f6f6f6;
		
		.details_list {
			width: 100%;
			
			.list {
				width: 100%;
				padding: 20rpx;
				margin-bottom: 30rpx;
				background: #fff;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.img {
					width: 180rpx;
					height: 240rpx;
					
					image {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				
				.info {
					width: calc(100% - 180rpx);
					height: 240rpx;
					padding-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					
					.title {
						width: 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #222222;
					}
					
					.txt {
						width: 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}
					
					.bot {
						width: 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						.time {
							color: #666666;
						}
						
						.num {
							color: #E267FF;
						}
					}
				}
			}
			
			.list:last-child {
				margin-bottom: 0;
			}
		}
		
		.footer_btn {
			width: 100%;
			padding: 30rpx 30rpx;
			background: #fff;
			
			.btn_txt {
				width: 100%;
				height: 90rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>